<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>员工列表</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/tailwindcss" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
	<script src="https://cdn.tailwindcss.com"></script>

	<!-- Tailwind 配置 -->
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#165DFF',
						secondary: '#36CFC9',
						accent: '#FF7D00',
						dark: '#1D2129',
						light: '#F2F3F5',
						'primary-light': '#4080FF',
						'primary-dark': '#0E42D2',
						success: '#00B42A',
						danger: '#F53F3F',
						warning: '#FF7D00',
						info: '#86909C',
					},
					fontFamily: {
						inter: ['Inter', 'system-ui', 'sans-serif'],
					},
					animation: {
						'fade-in': 'fadeIn 0.5s ease-in-out',
						'slide-up': 'slideUp 0.5s ease-out',
						'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
					},
					keyframes: {
						fadeIn: {
							'0%': { opacity: '0' },
							'100%': { opacity: '1' },
						},
						slideUp: {
							'0%': { transform: 'translateY(20px)', opacity: '0' },
							'100%': { transform: 'translateY(0)', opacity: '1' },
						}
					}
				}
			}
		}
	</script>

	<style type="text/tailwindcss">
		@layer utilities {
			.content-auto {
				content-visibility: auto;
			}
			.card-shadow {
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
			}
			.card-shadow-hover {
				transition: all 0.3s ease;
			}
			.card-shadow-hover:hover {
				box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
				transform: translateY(-2px);
			}
			.btn-hover {
				transition: all 0.2s ease;
			}
			.btn-hover:hover {
				transform: translateY(-1px);
			}
			.bg-gradient-blue {
				background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
			}
			.text-shadow {
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}
			.animate-on-scroll {
				opacity: 0;
				transform: translateY(20px);
				transition: opacity 0.6s ease-out, transform 0.6s ease-out;
			}
			.animate-on-scroll.visible {
				opacity: 1;
				transform: translateY(0);
			}
			.table-hover-row {
				transition: all 0.2s ease;
			}
			.table-hover-row:hover {
				background-color: rgba(22, 93, 255, 0.05);
			}
			.avatar {
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				object-fit: cover;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
			}
		}
	</style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<div id="wrap" class="w-full max-w-6xl mx-auto my-8 bg-white rounded-2xl shadow-xl overflow-hidden animate-fade-in">
	<!-- 头部区域 -->
	<div id="top_content">
		<div id="header" class="bg-gradient-blue text-white p-6 md:p-8 relative overflow-hidden">
			<!-- 装饰元素 -->
			<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/4 blur-3xl"></div>
			<div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/4 blur-3xl"></div>

			<div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
				<div id="topheader" class="mb-4 md:mb-0">
					<h1 id="title" class="text-2xl md:text-3xl font-bold tracking-tight text-shadow">
						<a href="#" class="flex items-center">
							<i class="fa fa-building-o mr-2"></i>
							<span>员工管理系统</span>
						</a>
					</h1>
				</div>

				<div id="rightheader" class="text-right">
					<p class="text-sm md:text-base">
						<i class="fa fa-calendar-o mr-1"></i> 2025/5/20
						<br />
						<span th:if="${session.user!=null}" class="inline-flex items-center">
                                <i class="fa fa-user mr-1"></i>
                                <span th:text="${session.user.username}"></span>
                                <a th:href="@{/user/logout}" class="ml-2 px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded transition-colors duration-200">
                                    <i class="fa fa-sign-out mr-1"></i>安全退出
                                </a>
                            </span>
						<a th:if="${session.user==null}" th:href="@{/login}" class="inline-flex items-center px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded transition-colors duration-200">
							<i class="fa fa-sign-in mr-1"></i>点我登录
						</a>
					</p>
				</div>
			</div>

			<!-- 导航栏 -->
			<div id="navigation" class="mt-4 bg-white/10 backdrop-blur-sm rounded-lg overflow-hidden">
				<ul class="flex flex-wrap p-2">
					<li class="mr-4 mb-2">
						<a href="#" class="px-3 py-1.5 rounded-md text-white hover:bg-white/20 transition-colors duration-200 flex items-center">
							<i class="fa fa-home mr-1"></i> 首页
						</a>
					</li>
					<li class="mr-4 mb-2">
						<a href="#" class="px-3 py-1.5 rounded-md text-white hover:bg-white/20 transition-colors duration-200 flex items-center">
							<i class="fa fa-users mr-1"></i> 员工管理
						</a>
					</li>
					<li class="mr-4 mb-2">
						<a href="#" class="px-3 py-1.5 rounded-md text-white hover:bg-white/20 transition-colors duration-200 flex items-center">
							<i class="fa fa-cog mr-1"></i> 设置
						</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- 内容区域 -->
		<div id="content" class="p-6 md:p-8">
			<p id="whereami" class="text-sm text-gray-500 mb-4">
				<a href="#" class="text-primary hover:underline">首页</a> &raquo; 员工列表
			</p>

			<h1 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-2 border-b border-gray-100">
				<i class="fa fa-users mr-2"></i>欢迎 <span th:if="${session.user!=null}" th:text="${session.user.username}"></span>
				<span th:if="${session.user==null}" >游客</span>!
			</h1>

			<!-- 员工列表表格 -->
			<div class="bg-white rounded-xl shadow-md overflow-hidden card-shadow-hover mb-8">
				<div class="overflow-x-auto">
					<table class="min-w-full divide-y divide-gray-200">
						<thead class="bg-gradient-blue text-white">
						<tr>
							<th scope="col" class="px-6 py-4 text-left text-sm font-medium tracking-wider">
								编号
							</th>
							<th scope="col" class="px-6 py-4 text-left text-sm font-medium tracking-wider">
								姓名
							</th>
							<th scope="col" class="px-6 py-4 text-left text-sm font-medium tracking-wider">
								头像
							</th>
							<th scope="col" class="px-6 py-4 text-left text-sm font-medium tracking-wider">
								工资
							</th>
							<th scope="col" class="px-6 py-4 text-left text-sm font-medium tracking-wider">
								生日
							</th>
							<th scope="col" class="px-6 py-4 text-left text-sm font-medium tracking-wider">
								操作
							</th>
						</tr>
						</thead>
						<tbody class="bg-white divide-y divide-gray-200">
						<tr th:each="employee,state:${employeeList}" class="table-hover-row" th:class="${state.odd?'bg-white':'bg-gray-50'}">
							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
								<span th:text="${employee.id}"></span>
							</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
								<span th:text="${employee.name}"></span>
							</td>
							<td class="px-6 py-4 whitespace-nowrap">
								<img th:src="@{/}+${employee.photo}" class="avatar" alt="员工头像">
							</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
								<span class="font-medium text-primary" th:text="${employee.salary}"></span>
							</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
								<span th:text="${#dates.format(employee.birthday,'yyyy/MM/dd')}"></span>
							</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
								<button type="button" th:onclick="'deleteEmployee('+${employee.id}+')'" class="text-danger hover:text-danger/80 transition-colors duration-200 mr-3 inline-flex items-center">
									<i class="fa fa-trash-o mr-1"></i> 删除
								</button>
								<a th:href="@{/employee/detail(id=${employee.id})}" class="text-primary hover:text-primary-dark transition-colors duration-200 inline-flex items-center">
									<i class="fa fa-pencil mr-1"></i> 更新
								</a>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>

			<!-- 添加按钮 -->
			<div class="flex justify-end">
				<button type="button" class="button bg-gradient-blue hover:from-primary-dark hover:to-primary-light text-white font-medium py-3 px-8 rounded-lg transition-all duration-200 btn-hover flex items-center" onclick="addEmp()">
					<i class="fa fa-plus-circle mr-2"></i> 添加员工
				</button>
			</div>
		</div>
	</div>

	<!-- 页脚区域 -->
	<div id="footer" class="bg-gradient-blue text-white p-6">
		<div id="footer_bg" class="flex flex-col md:flex-row justify-between items-center">
			<div class="mb-4 md:mb-0">
				<p class="text-sm">© 2025 员工管理系统</p>
			</div>
			<div class="flex space-x-4">
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-envelope"></i>
				</a>
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-phone"></i>
				</a>
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-weixin"></i>
				</a>
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-weibo"></i>
				</a>
			</div>
		</div>
	</div>
</div>

<script>
	// 删除员工函数
	function deleteEmployee(id) {
		console.log(id);

		// 创建确认对话框
		const dialog = document.createElement('div');
		dialog.className = 'fixed inset-0 flex items-center justify-center z-50';
		dialog.innerHTML = `
                <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"></div>
                <div class="relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4 transform transition-all">
                    <div class="p-6">
                        <div class="flex items-center justify-center mb-4">
                            <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center">
                                <i class="fa fa-exclamation-triangle text-danger text-xl"></i>
                            </div>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2 text-center">确认删除</h3>
                        <p class="text-gray-600 text-center mb-6">确定要删除这条记录吗? 此操作不可撤销。</p>
                        <div class="flex justify-center space-x-4">
                            <button onclick="document.body.removeChild(this.closest('.fixed'))" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                                取消
                            </button>
                            <button onclick="confirmDelete(${id})" class="px-4 py-2 bg-danger text-white rounded-md hover:bg-danger/90 transition-colors duration-200">
                                确认删除
                            </button>
                        </div>
                    </div>
                </div>
            `;

		document.body.appendChild(dialog);

		// 添加动画效果
		setTimeout(() => {
			dialog.querySelector('.bg-opacity-50').classList.add('opacity-100');
			dialog.querySelector('.max-w-md').classList.add('scale-100');
		}, 10);
	}

	// 确认删除
	function confirmDelete(id) {
		location.href='[[@{/employee/delete?id=}]]'+id;
	}

	// 添加员工
	function addEmp() {
		location.href = '[[@{/addEmp}]]';
	}

	// 页面加载动画
	document.addEventListener('DOMContentLoaded', function() {
		const elements = document.querySelectorAll('.animate-on-scroll');
		const observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					entry.target.classList.add('visible');
				}
			});
		}, { threshold: 0.1 });

		elements.forEach(el => {
			observer.observe(el);
		});
	});
</script>
</body>
</html>